import { LitElement, html } from "lit";
import { repeat } from "lit/directives/repeat.js";

class DynamicRepeatedTemplates extends LitElement {
    static get properties() {
        return {
            items: { type: Array }
        };
    }

    constructor() {
        super();

        this.items = [
            { id: 0, message: "hello" },
            { id: 1, message: "world" },
            { id: 2, message: "foo" },
            { id: 3, message: "bar" }
        ];
    }

    render() {
        return html`
      <div>
        <button @click="${this.reorder}">Re-order items (random)</button>
        <!--
        对于频繁重新排序的动态列表，可以使用repeat指令。
        该指令处理dom节点的高效重新排序，而无需不必要地重新创建它们。
        要做到这一点，列表中的项应该是唯一的。传递给一个标识函数
        告诉指令如何识别单个项目。
        -->
        ${repeat(
            this.items, // the array of items
            item => item.id, // the identify function
            (item, i) =>
                html`
              <div>[${i}] Message ${item.id}: ${item.message}</div>
            ` // the template for each item
        )}
      </div>
    `;
    }

    /* re-orders items randomly */
    reorder() {
        this.items = [...this.items.sort(() => Math.floor(Math.random() * 3) + -1)];
    }
}

customElements.define("dynamic-repeated-templates", DynamicRepeatedTemplates);
